<template>
  <div class="front serve">
    <div class="header-box">
      <Header></Header>
    </div>
    <div class="mianbao" :style="{backgroundImage:`url(${require('@/assets/front-img/bg1.png')})`}"></div>
    <div class="serve-container">
      <div class="serve-main">
        <div class="main">
          <li v-for="(item,index) in list" :key="index" @click="toDetail(item.id)">
            <div class="img">
              <img :src="item.image" alt />
            </div>
            <h2>{{item.name}}</h2>
            <p>{{item.viceName}}</p>
          </li>
        </div>
      </div>
    </div>

    <div class="footer">
      <Footer :showfHead="true"></Footer>
    </div>
  </div>
</template>

<script>
import { getNewDetail, getNewData } from "@/api/front-home.js";
import Footer from "@/views/front/components/Footer";
import Header from "@/views/front/components/Header";
export default {
  data() {
    return {
      list: [],
      listQuery: {
        code: "serviceCompany",
        // code: "news",
      },
    };
  },
  created() {
    this.getNewData();
  },
  components: {
    Footer,
    Header,
  },
  methods: {
    getNewData() {
      getNewData(this.listQuery).then((res) => {
        if (res.list && res.list.length) {
          this.list = res.list;
        }
      });
    },
    toDetail(id) {
      this.$router.push({ path: "/front-serveDetail", query: { id: id } });
    },
  },
};
</script>

<style lang="scss" scoped>
.serve {
  .mianbao {
    width: 100%;
    height: 365px;
    background-size: cover;
    background-position: center center;
  }
  .serve-container {
    background-color: #f6f6f6;
    .serve-main {
      width: 1200px;
      margin: 0 auto;
      padding: 29px 0;
      overflow: hidden;
      .main {
        padding: 33px;
        margin-right: -33px;
        display: flex;
        flex-wrap: wrap;
        background-color: #fff;
        li {
          margin-bottom: 47px;
          margin-right: 33px;
          width: calc(33.33% - 33px);
          cursor: pointer;
          .img {
            width: 100%;
            height: 236px;
            > img {
              width: 100%;
              height: 100%;
            }
          }
          h2 {
            font-size: 24px;
            font-family: Microsoft YaHei;
            font-weight: 400;
            color: #000000;
            margin: 28px 0px 18px;
            line-height: 30px;
          }
          p {
            font-size: 16px;
            font-family: MicrosoftYaHeiLight;
            font-weight: 400;
            color: #000000;
            line-height: 26px;
            min-height: 78px;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 3;
            -webkit-box-orient: vertical;
          }
        }
      }
    }
  }
}
</style>